<template>
  <a-card>
    <template #title>
      <a-form layout="vertical">
        <a-row :gutter="24">
          <a-col :md="6" :xs="24">
            <a-form-item :label="$t('银行名称')">
              <a-select v-model:value="page.bankName" allowClear>
                <a-select-option v-for="item in bankList" :key="item.bankCode" :value="item.bankName">{{
                    item.bankName
                  }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="6" :xs="24">
            <a-form-item :label="$t('银行别名')">
              <a-input v-model:value="page.alias" allowClear/>
            </a-form-item>
          </a-col>
          <a-col :md="6" :xs="24">
            <a-form-item :label="$t('银行账号')">
              <a-input v-model:value="page.bankAccount" allowClear/>
            </a-form-item>
          </a-col>
          <a-col :md="6" :xs="24">
            <a-form-item :label="$t('状态')">
              <a-select v-model:value="page.status" allowClear>
                <a-select-option :value="1">{{ $t('启用') }}</a-select-option>
                <a-select-option :value="0">{{ $t('禁用') }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="24" style="text-align: right">
            <a-button type="primary" @click="getTableData">{{ $t('查询') }}</a-button>
            <a-button style="margin-left: 10px" @click="resetSearch">{{ $t('重置') }}</a-button>
          </a-col>
        </a-row>
      </a-form>
    </template>
    <div style="margin-bottom: 10px;text-align: right">
      <a-button type="primary" @click="addCard">新增</a-button>
    </div>
    <a-table row-key="id" :data-source="tableData" :columns="tableColumn"
             :scroll="{x:1000}"
             :pagination="pagination">
      <template #status="{record}">
        <a-switch :checked="record.status === 1" @change="changeStatus(record)"></a-switch>
      </template>
      <template #handle="{record}">
        <a-button type="link" @click="editCard(record)">{{
            $t('编辑')
          }}
        </a-button>
        <a-button type="link" @click="bindUser(record)">{{
            $t('绑定打款员')
          }}
        </a-button>
      </template>
    </a-table>
    <!--    新增 编辑-->
    <a-modal v-model:visible="editVisible.isShow" :title="editVisible.title" :after-close="close"
             @ok="editConfirm()">
      <a-form :model="editForm" ref="formRef" :label-col="{span:5}">
        <a-form-item :label="$t('银行名称')" prop="bankName" :rules="[
             {required:true,message:$t('不能为空')}
        ]">
          <a-select v-model:value="editForm.bankName" allowClear>
            <a-select-option v-for="item in bankList" :value="item.bankName">{{
                item.bankName
              }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item :label="$t('银行别名')" prop="alias" :rules="[
             {required:true,message:$t('不能为空')}
        ]">
          <a-input v-model:value="editForm.alias" allowClear/>
        </a-form-item>
        <a-form-item :label="$t('银行账号')" prop="bankAccount" :rules="[
             {required:true,message:$t('不能为空')}
        ]">
          <a-input v-model:value="editForm.bankAccount" allowClear/>
        </a-form-item>
        <a-form-item :label="$t('银行账户名')" prop="bankAccountName" :rules="[
             {required:true,message:$t('不能为空')}
        ]">
          <a-input v-model:value="editForm.bankAccountName" allowClear/>
        </a-form-item>
        <a-form-item :label="$t('备注')" prop="remark">
          <a-textarea :rows="4" v-model:value="editForm.remark" allowClear/>
        </a-form-item>
        <a-form-item :label="$t('状态')" prop="status">
          <a-radio-group v-model:value="editForm.status">
            <a-radio :value="1">{{ $t('启用') }}</a-radio>
            <a-radio :value="0">{{ $t('禁用') }}</a-radio>
          </a-radio-group>
        </a-form-item>
      </a-form>
    </a-modal>
    <!--    绑定打款员工-->
    <a-modal v-model:visible="bindVisible" :title="$t('绑定打款员工')" :after-close="bindClose"
             @ok="BindUserConfirm()" width="55%">
      <a-form layout="vertical">
        <a-row :gutter="24">
          <a-col :span="6" style="text-align: right">
            <a-form-item :label="$t('员工账号')">
              <a-input v-model:value="bindPage.account" allowClear/>
            </a-form-item>
          </a-col>
          <a-col :span="6" style="text-align: right">
            <a-form-item :label="$t('员工姓名')">
              <a-input v-model:value="bindPage.name" allowClear/>
            </a-form-item>
          </a-col>
          <a-col :span="6" style="text-align: left">
            <a-button type="primary" @click="getSystemUser">{{ $t('查询') }}</a-button>
          </a-col>
        </a-row>
      </a-form>
      <a-table row-key="id" :data-source="bindTableData" :columns="bindTableColumn"
               :scroll="{x:1000,y:700}"
               :pagination="false"
      >
        <template #radio="{record}">
          <a-radio :checked="record.isBindOfflinePay === 1" @change="changeBindValue(record)"></a-radio>
        </template>
        <template #isInterBank="{record}">
          <a-switch :checked="record.isInterBank === 1" @change="changeIsInterBank(record)"></a-switch>
        </template>
        <template #isAssignOrder="{record}">
          <a-switch :checked="record.isAssignOrder === 1" @change="changeIsAssignOrder(record)"></a-switch>
        </template>
      </a-table>
    </a-modal>
  </a-card>
</template>

<script>
import {computed, onMounted, reactive, toRefs, ref} from "vue";
import {
  offlineSetList,
  offlinePayList,
  offlinePayInsert,
  offlinePayUpdate,
  offlinePayUpdateStatus,
  selectPaySystemUser,
  offlinePayBindSystemUser,
  updateIsAssignOrder,
  updateIsInterBank
} from "../../../api/system"
import i18n from "../../../locale";
import {message, Modal} from "ant-design-vue";

const $t = i18n.global.t
const tableColumn = [
  {title: $t('银行名称'), dataIndex: 'bankName', align: 'center'},
  {title: $t('银行别名'), dataIndex: 'alias', align: 'center'},
  {title: $t('银行账号'), dataIndex: 'bankAccount', align: 'center'},
  {title: $t('银行账户名'), dataIndex: 'bankAccountName', align: 'center'},
  {title: $t('创建时间'), dataIndex: 'creationTime', align: 'center', width: 150},
  {title: $t('创建人'), dataIndex: 'inputName', align: 'center'},
  {title: $t('备注'), dataIndex: 'remark', align: 'center'},
  {title: $t('状态'), dataIndex: 'status', align: 'center', slots: {customRender: 'status'}},
  {title: $t('操作'), fixed: 'right', align: 'center', slots: {customRender: 'handle'}},
]
const bindTableColumn = [
  {title: $t(''), dataIndex: 'account', align: 'center', slots: {customRender: 'radio'}},
  {title: $t('员工账号'), dataIndex: 'account', align: 'center'},
  {title: $t('员工姓名'), dataIndex: 'name', align: 'center'},
  {title: $t('角色名称'), dataIndex: 'roleName', align: 'center'},
  {title: $t('可分配跨行转账订单'), align: 'center', slots: {customRender: 'isInterBank'}},
  {title: $t('分单开关'), align: 'center', slots: {customRender: 'isAssignOrder'}},
]
export default {
  name: "OfflinePayChannel",
  setup() {
    const state = reactive({
      page: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      tableData: [],
      merchantList: [],
      editVisible: {
        isShow: false,
        title: '',
        type: ''
      },
      editForm: {
        bankAccount: null,
        bankAccountName: null,
        bankName: null,
        alias: null,
        remark: null,
        status: 1,
      },
      tableRows: {},
      bankList: [],
      bindVisible: false,
      bindPage: {},
      bindTableData: [],
    })
    const formRef = ref(null)
    const pagination = computed(() => ({
      current: state.page.pageNum,
      total: state.page.total,
      pageSize: state.page.pageSize,
      showSizeChanger: true,
      showQuickJumper: true,
      pageSizeOptions: ['10', '50', '100', '200'],
      showTotal: total => total + $t('条'),
      onChange: (value) => {
        state.page.pageNum = value
        methods.getTableData()
      },
      onShowSizeChange: (page, size) => {
        state.page.pageNum = page
        state.page.pageSize = size
        methods.getTableData()
      }
    }))
    const methods = {
      async getTableData() {
        const res = await offlinePayList(state.page)
        if (res.code === 200) {
          const {list, total} = res.data
          state.tableData = list
          state.page.total = total
        }
      },
      resetSearch() {
        state.page = {
          pageNum: 1,
          pageSize: 10,
          total: 0
        }
        methods.getTableData()
      },
      editCard(row) {
        state.editVisible = {
          isShow: true,
          title: $t('编辑银行卡'),
          type: 'edit'
        }
        state.editForm = {
          bankAccount: row.bankAccount,
          bankAccountName: row.bankAccountName,
          bankName: row.bankName,
          alias: row.alias,
          remark: row.remark,
          status: row.status,
        }
        state.tableRows = {...row}
      },
      addCard() {
        state.editVisible = {
          isShow: true,
          title: $t('新增银行卡'),
          type: 'add'
        }
      },
      editConfirm() {
        formRef.value.validate().then(async (v) => {
          if (v) {
            const isAdd = state.editVisible.type === 'add'
            const api = (params) => isAdd ? offlinePayInsert(params) : offlinePayUpdate(params)
            const res = await api({
              ...state.editForm,
              offlinePayId: state.tableRows.offlinePayId
            })
            if (res.code === 200) {
              state.editVisible = false
              message.success(isAdd ? $t('新增成功') : $t('编辑成功'))
              methods.getTableData()
            }
          }
        })
      },
      changeStatus(row) {
        Modal.confirm({
          title: $t('确认进行此操作') + '?',
          async onOk() {
            const res = await offlinePayUpdateStatus({
              status: row.status === 1 ? 0 : 1,
              offlinePayId: row.offlinePayId
            })
            if (res.code === 200) {
              message.success($t('操作成功'))
              methods.getTableData()
            }
          },
        });
      },
      close() {
        state.editForm = {
          bankAccount: null,
          bankAccountName: null,
          bankName: null,
          alias: null,
          remark: null,
          status: 1,
        }
        formRef.value.resetFields()
      },

      async bindUser(rows) {
        state.tableRows = {...rows}
        await methods.getSystemUser()
        state.bindVisible = true
      },
      //  获取打款员工
      async getSystemUser() {
        const res = await selectPaySystemUser({
          offlinePayId: state.tableRows.offlinePayId, ...state.bindPage,
          pageSize: 1000
        })
        if (res.code === 200) {
          const {list, total} = res.data
          state.bindTableData = list
          state.bindPage.total = total
        }
      },
      changeBindValue(row) {
        state.bindTableData = state.bindTableData.map(item => {
          if (row.systemUserId === item.systemUserId) {
            item.isBindOfflinePay = 1
          } else {
            item.isBindOfflinePay = 0
          }
          return item
        })
      },
      // 绑定员工提交
      async BindUserConfirm() {
        const user = state.bindTableData.find(item => item.isBindOfflinePay === 1)
        if (!user) {
          return message.error($t('请选择员工'))
        }
        const res = await offlinePayBindSystemUser({
          offlinePayId: state.tableRows.offlinePayId,
          adminUserId: user.systemUserId
        })
        if (res.code === 200) {
          state.bindVisible = false
          message.success($t('操作成功'))
          methods.getTableData()
        }
      },

      changeIsInterBank(row) {
        Modal.confirm({
          title: $t('确认进行此操作') + '?',
          async onOk() {
            const res = await updateIsInterBank({
              isInterBank: row.isInterBank === 1 ? 0 : 1,
              adminUserId: row.systemUserId
            })
            if (res.code === 200) {
              message.success($t('操作成功'))
              methods.getSystemUser()
            }
          },
        });
      },
      changeIsAssignOrder(row) {
        Modal.confirm({
          title: $t('确认进行此操作') + '?',
          async onOk() {
            const res = await updateIsAssignOrder({
              isAssignOrder: row.isAssignOrder === 1 ? 0 : 1,
              adminUserId: row.systemUserId
            })
            if (res.code === 200) {
              message.success($t('操作成功'))
              methods.getSystemUser()
            }
          },
        });
      },
      bindClose() {
        state.bindPage = {}
      },
      getSelect() {
        offlineSetList({pageNum: 1, pageSize: 1000}).then(res => {
          state.bankList = res.data.list
        })
      }
    }
    onMounted(() => {
      methods.getTableData()
      methods.getSelect()
    })
    return {
      ...toRefs(state),
      ...methods,
      formRef,
      pagination,
      tableColumn,
      bindTableColumn
    }
  }
}
</script>

<style scoped>

</style>
